// 引入一个新的实例用于创建Dialog弹框
import Vue from 'vue'
// 引入element-ui的Dialog组件
import { Dialog } from 'element-ui'

// 返回一个创建Promise的Dialog弹框函数
export function createPromiseDialog(component, options = {}) {
  // 返回Promise
  return function (config = {}, data = {}) {
    return new Promise((resolve, reject) => {
      // 创建一个div元素用于挂载新实例化的Vue组件
      const div = document.createElement('div')
      document.body.appendChild(div)

      // 创建弹框销毁功能
      function destroyEle() {
        // 组件销毁
        vm.$destroy()
        // 移除div元素
        vm.$el.remove()
        resolve()
      }
      // 实例化Vue组件
      const vm = new Vue({
        data() {
          return {
            title: '默认弹窗'
          }
        },
        // 使用render函数渲染Dialog弹框组件
        render(h) {
          return h(
            Dialog,
            {
              props: {
                visible: true,
                ...options,
                ...config,
                title: config.title || this.title
              },
              on: {
                close: destroyEle
              }
            },
            // 将传递进来的组件作为Dialog弹框的子组件
            // 为子组件绑定confirm和cancel事件保证弹框的正确关闭
            [
              h(component, {
                props: {
                  ...data
                },
                on: {
                  confirm: args => {
                    resolve(args)
                    destroyEle()
                  },
                  cancel: args => {
                    reject(args)
                    destroyEle()
                  }
                }
              })
            ]
          )
        }
      })
      // 挂载组件
      vm.$mount(div)
    })
  }
}
